<template>
  <div class="public">
    <van-form @submit="onSubmit">
      <van-field
        v-model="userInfo.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ validator, message: '请填写正确的手机号' }]"
      />
      <van-field
        v-model="userInfo.code"
        name="验证码"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写密码' }]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            native-type="button"
            :disabled="btnDisable"
            @click="sendCheckCode"
            >{{ btnText }}</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// 引入接口
// @: src
import { login, getCheckCode } from "@/api";
export default {
  name: "login",
  data() {
    return {
      userInfo: {},
      btnText: "发送验证码",
      btnDisable: false, // 发送验证码是否禁用
    };
  },
  methods: {
    // 手机号校验规则
    validator(value) {
      return /^(?:(?:\+|00)86)?1\d{10}$/.test(value);
    },
    // 登录
    onSubmit() {
      login(this.userInfo).then((res) => {
          // 报错token
          localStorage.setItem('token', res.data)

          // 跳转页面
          this.$router.push('/')
          
          // 成功提示
          this.$toast.success({ message: res.msg});
      });
    },
    // 获取验证码
    getCheckCode() {
      getCheckCode().then((res) => {
        this.$toast({ message: `验证码为${res.data}`, duration: 3000 });
      });
    },
    // 点击发送按钮
    sendCheckCode() {
      if (!this.userInfo.phone) {
        this.$toast("请输入手机号");
        return;
      } else if (!this.validator(this.userInfo.phone)) {
        // 点击发送验证码是 校验手机号
        this.$toast("请填写正确的手机号");
        return;
      }

      // 请求验证码
      this.getCheckCode();

      // 使按钮禁用
      this.btnDisable = true;

      // 倒计时时间
      let timeOut = 10;

      // 定时器
      let timer = null;

      timer = setInterval(() => {
        // 倒计时时间 -1
        timeOut = timeOut - 1;

        // 更改按钮文字
        this.btnText = `${timeOut}s后重试`;

        // 判断 如果倒计时时间为0的话 清除定时器
        if (timeOut <= 0) {
          clearInterval(timer);
          // 取消按钮禁用
          this.btnDisable = false;

          // 修改按钮文字
          this.btnText = "发送验证码";
        }
      }, 1000);
    },
  },
};
</script>